<template>
    <section class="invoice">
        <div class="invoice-info">
            <h3>发票类型</h3>
            <div class="invoice-type">
                <span :class="{'active': select == '02'}" @click="fn('02')">普通发票</span>
                <span :class="{'active': select == '04'}" @click="fn('04')">电子发票</span>
                <span  class="no-invoice">不开发票</span>
            </div>
        </div>

        <div class="invoice-info">
            <h3>发票抬头</h3>
            <input type="text" v-model="text" placeholder="姓名/单位名称">
        </div>

        <div class="Invoice_button" @click="fn1()">确定</div>
         
    </section>
</template>

<script>
    import {  InvoiceInfo, queryInvoice } from '@/service/getData'
    export default {
         data(){
            return {
                select: '02',
                text: '现在',
                invoiceType: '02',
            }
         },
         created(){
            queryInvoice({
                cart2No: this.$route.params.id
            })
            .then((json) => {
                if(!json.data || !json.data.savedInvoiceInfo)return
                this.invoiceType = this.select = json.data.savedInvoiceInfo.invoiceType
                this.text = json.data.savedInvoiceInfo.invoiceTitle
            })
         },
         methods: {
            fn(type){
                this.invoiceType = this.select = type;
            },
            fn1(){
                InvoiceInfo({
                    accntBank: '',
                    bankAccntNum: '',
                    cart2No: this.$route.params.id,
                    invoiceContent: '',
                    invoiceSpecialFlag: '',
                    invoiceTitle: this.text,
                    invoiceType: this.invoiceType,
                    regAddr:'',
                    regPhone: '',
                    taxPayerAddr: '',
                    taxPayerName: '',
                    taxPayerNo: '',
                    taxPayerPhone: ''
                })
                .then((json) => {
                    console.log(json);
                    if(!json.data && !json.data.cartHeadInfo) return;

                    if(json.data.cartHeadInfo.isSuccess == 'Y'){
                        if(json.data.cartHeadInfo.cart2No == this.$route.params.id){
                            AlertBox({
                                type:'mini',
                                msg: '保存成功'
                            })
                        }
                    }else {
                        AlertBox({
                            type:'mini',
                            msg: json.data.errorInfos[0].errorMessage
                        })
                    }

                    this.$router.push('/cart2/center/'+this.$route.params.id)

                })    
             }
         }
    }
    // /xd-cart-web/cloud/cart2/recInvoiceInfo.do
</script>

<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
    }

    .invoice { 
        background-color: #f1f1f1;
    }

    .invoice .invoice-info {
        background-color: #fff;
        padding: 0 _(28);
        margin-bottom: _(12);

        h3 {
            color: #a8a8a8;
            font-size: _(24);
            height: _(80);
            line-height: _(80);
        }

        .invoice-type {
            overflow: hidden;
            padding-bottom: _(24);

            span {
                display: inline-block;
                width: _(198);
                height: _(60);
                line-height: _(60);
                margin-left: _(23);
                border: 1px solid #e7e7e7;
                text-align: center;
                color: #000;
                font-size: _(25);
                border-radius: _(4);
                box-shadow: 0 0 2px #c3c0c0;

                &.no-invoice {
                    color: #8c8c8c;
                }
                &.active {
                    color: #dd7842;
                    border: 1px solid #dd7842;
                    box-shadow: 0 0 2px #dd7842;
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: _(30);
                        height: _(30);
                        background-image: url('/static/images/true_1.png');
                        background-size: 100% 100%;
                    }
                }
            }
        }

        input {
            width: _(690);
            margin: 0 auto;
            height: _(70);
            line-height: _(70);
            font-size: _(28);
            padding-left: _(10);
            color: #595959;
            border: #f2f2f2 solid 1px;
            margin-bottom: _(12);
        }
    }

    .Invoice_button {
        width: _(710);
        margin: 0 auto;
        height: _(60);
        line-height: _(60);
        background-color: #ff7d37;
        border-radius: _(5);
        font-size: _(30);
        text-align: center;
        color: #fff;
    }
</style>

